<template>
  <div>
    <div class="pageBody">
      <div style="margin-bottom:20px">
        <a-form-model
          ref="ruleFormLine"
          :model="formLine"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          layout="inline"
        >
          <a-form-model-item ref="title" label="标题" prop="title">
            <a-input v-model="formLine.title" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="name" label="发布人" prop="name">
            <a-input v-model="formLine.name" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="dayTime" label="发布日期" prop="dayTime">
            <a-range-picker
              @change="onChange"
              :placeholder="placeholder"
              v-model="formLine.dayTime"
            />
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary">查询</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
    <div class="pageBody">
      <div style="padding-left:5px">
        <div class="flexStartCenter" style="margin-bottom:15px">
          <div class="boxTitle">所属栏目：</div>
          <!-- <transition name="fade"> -->
          <div
            v-for="(item,index) in columnList"
            :key="index"
            class="columnBox"
            :class="{ isBlue: item.select}"
            @click="onBox(item) "
          >{{item.label}}</div>
          <!-- </transition> -->
        </div>
        <div class="flexStartCenter" style="margin-bottom:15px">
          <div class="boxTitle">内容类型：</div>
          <!-- <transition name="fade"> -->
          <div
            v-for="(item,index) in columnList2"
            :key="index"
            class="columnBox2"
            :class="{ isBlue2: item.select}"
            @click="onBox(item) "
          >{{item.label}}</div>
          <!-- </transition> -->
        </div>
        <div class="flexStartCenter" style="margin-bottom:15px">
          <div class="boxTitle">发布状态：</div>
          <!-- <transition name="fade"> -->
          <div
            v-for="(item,index) in columnList3"
            :key="index"
            class="columnBox2"
            :class="{ isBlue2: item.select}"
            @click="onBox(item) "
          >{{item.label}}</div>
          <!-- </transition> -->
        </div>
      </div>

      <div style="margin:0px 0px 20px 0px">
        <a-button type="primary" icon="plus" @click="onAdd">新建</a-button>
      </div>

      <!-- 表格 -->
      <div class="atable" style="margin-bottom:20px">
        <a-table :columns="columns" :data-source="data" :pagination="false">
          <a slot="name" slot-scope="text" style="text-decoration: underline;">{{text}}</a>

          <span slot="progressStatus" slot-scope="progressStatus">
            <a-badge color="blue" v-if="progressStatus=='1'" text="已发布" status="processing" />
            <a-badge color="#ccc" v-if="progressStatus=='0'" text="待审核" />
          </span>

          <span slot="action" slot-scope="text, record">
            <a
              style="color:#1890FF;margin-right:20px"
              @click="onDetail(text, record)"
              v-if="text.progressStatus=='1'"
            >编辑</a>
            <a
              style="color:#1890FF;margin-right:20px"
              @click="onDetail(text, record)"
              v-if="text.progressStatus=='0'"
            >删除</a>
          </span>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="pagination flexBetween">
        <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
        <div>
          <a-pagination
            :current="current"
            :page-size-options="pageSizeOptions"
            :total="this.configFun.pageNum(total)"
            show-size-changer
            :page-size="pageSize"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            show-quick-jumper
          >
            <template slot="buildOptionText" slot-scope="props">
              <span>{{ props.value }}条/页</span>
              <!-- <span v-if="props.value === '40'">全部</span> -->
            </template>
          </a-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { log } from 'util'
const columns = [
  { title: '标题', dataIndex: 'name', key: 'name', scopedSlots: { customRender: 'name' }, align: 'center' },
  { title: '发布日期', dataIndex: 'date', key: 'date', align: 'center' },
  { title: '类型', dataIndex: 'type', key: 'type', align: 'center' },
  { title: '所属栏目', dataIndex: 'colu', key: 'colu', align: 'center' },
  { title: '学习数', dataIndex: 'account', key: 'account', align: 'center' },
  { title: '点赞数', dataIndex: 'star', key: 'star', align: 'center' },
  { title: '积分时长', dataIndex: 'time', key: 'time', scopedSlots: { customRender: 'fullName' } },
  { title: '发布人', dataIndex: 'fullName', key: 'fullName', scopedSlots: { customRender: 'fullName' } },
  {
    title: '状态',
    dataIndex: 'progressStatus',
    key: 'progressStatus',
    scopedSlots: { customRender: 'progressStatus' },
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
const tabdata = [
  {
    key: '1',
    name: '进入施工现场须知',
    fullName: '张三',
    account: '23',
    type: '文章',
    colu: '安全教育',
    star: '8',
    time: '60秒',
    date: '2021-12-32',
    progressStatus: '1'
  },
  {
    key: '2',
    name: '进入施工现场须知',
    date: '2021-12-32',
    fullName: '张三',
    account: '23',
    type: '文章',
    colu: '安全教育',
    star: '8',
    time: '60秒',
    progressStatus: '0'
  }
]
export default {
  data() {
    return {
      placeholder: ['请选择', '请选择'],
      rules: {
        name: [
          {
            required: true,
            message: '请输入栏目名称',
            trigger: 'change'
          }
        ]
      },
      formLine: {
        name: '',
        title: '',
        dayTime: []
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      columnList: [
        { value: 1, label: '全部', select: false },
        { value: 2, label: '栏目一', select: false },
        { value: 3, label: '栏目一', select: false },
        { value: 4, label: '栏目一', select: false },
        { value: 5, label: '栏目一', select: false },
        { value: 6, label: '栏目一', select: false },
        { value: 7, label: '栏目一', select: false },
        { value: 8, label: '栏目一', select: false },
        { value: 9, label: '栏目一', select: false },
        { value: 10, label: '栏目一', select: false }
      ],
      columnList2: [
        { value: 1, label: '文章', select: false },
        { value: 2, label: '视频', select: false }
      ],
      columnList3: [
        { value: 1, label: '已发布', select: false },
        { value: 2, label: '待审核', select: false }
      ],
      columns,
      data: tabdata,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      flag: true
    }
  },
  methods: {
    //时间切换
    onChange(date, dateString) {
      console.log(date, dateString)
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
      // this.getTable()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
    },
    onDetail() {},
    onBox(val) {
      if (val.value == 1) {
      
        this.columnList.forEach((item, index) => {
          item.select = this.flag
        })
        this.flag = !this.flag
      } else {
        val.select = !val.select
      }
    },
    //点击amodal确定
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.visible = false
        } else {
          return false
        }
      })
    },
    //点击新增
    onAdd() {
      this.visible = true
      this.form.unit = ''
      this.form.name = ''
      this.unitModel = []
    }
  }
}
</script>

<style scoped>
.pageBody {
  background: #fff;
  margin: 20px;
  padding: 35px 20px 20px;
}
.columnBox {
  padding: 3px 10px;
  min-width: 62px;
  text-align: center;
  margin-right: 20px;
}
.columnBox2 {
  padding: 3px 10px;
  min-width: 62px;
  text-align: center;
  margin-right: 20px;
}
.columnBox:hover {
  cursor: pointer;
  color: #1890ff;
}
.columnBox2:hover {
  cursor: pointer;
  color: #1890ff;
}
.boxTitle {
  margin-right: 12px;
}
.isBlue {
  color: #fff;
  background: #1890ff;
}
.isBlue2 {
  color: #fff;
  /* padding: 3px 20px; */
  background: #1890ff;
}
.isBlue:hover {
  cursor: pointer;
  color: #fff;
}
.isBlue2:hover {
  cursor: pointer;
  color: #fff;
}
.fade-enter-active,
.fade-leave-active {
  /* transition: background-color 1s; */
  transition: color 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  background-color: #1890ff;
  color: #fff;
}
</style>